<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>WireIt - WiringEditor</title>
	<link rel="icon" href="../../favicon.ico" type="image/png" />
  <link rel="SHORTCUT ICON" href="../../favicon.ico" type="image/png" />

<style type="text/css">
body {
	margin:0;
	padding:0;
}
</style>

<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="../../lib/yui/assets/skins/sam/skin.css" />

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../css/WireItEditor.css" />

<!-- YUI -->
<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../../lib/yui/resize/resize-min.js"></script>
<script type="text/javascript" src="../../lib/yui/layout/layout-min.js"></script>
<script type="text/javascript" src="../../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../../lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="../../lib/yui/button/button-min.js"></script>

<!-- InputEx with wirable options (WirableField-beta) -->
<script src="../../lib/inputex/js/inputex.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/Field.js"  type='text/javascript'></script>
<script type="text/javascript" src="../../js/util/inputex/WirableField-beta.js"></script>
<script src="../../lib/inputex/js/Group.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/StringField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/EmailField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/UrlField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/ListField.js"  type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/CheckBox.js"  type='text/javascript'></script>

<!-- WireIt -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../../js/WireIt.js"></script>
<script type="text/javascript" src="../../js/CanvasElement.js"></script>
<script type="text/javascript" src="../../js/Wire.js"></script>
<script type="text/javascript" src="../../js/Terminal.js"></script>
<script type="text/javascript" src="../../js/util/DD.js"></script>
<script type="text/javascript" src="../../js/util/DDResize.js"></script>
<script type="text/javascript" src="../../js/Container.js"></script>
<script type="text/javascript" src="../../js/Layer.js"></script>
<script type="text/javascript" src="../../js/util/inputex/FormContainer-beta.js"></script>
<script type="text/javascript" src="../../js/LayerMap-beta.js"></script>
<script type="text/javascript" src="../../js/WiringEditor.js"></script>

<script>

// InputEx needs a correct path to this image
inputEx.spacerUrl = "/inputex/trunk/images/space.gif";

YAHOO.util.Event.onDOMReady( function() {
try {
	new WireIt.WiringEditor({
		loadUrl: 'php/loadModules.php',
		saveUrl: 'php/saveModule',
		
		propertiesFields: [/* inputEx field definitions */],
		
		// Add a right panel
		layoutOptions: {
	        units: [
	          { position: 'top', height: 50, body: 'top'},
	          { position: 'left', width: 200, resize: true, body: 'left', gutter: '5px', collapse: true, 
	            collapseSize: 25, header: 'Modules', scroll: true, animate: true },
	          { position: 'center', body: 'center', gutter: '5px' },
	          { position: 'right', width: 266, resize: true, body: 'right', gutter: '5px', collapse: true, 
	             collapseSize: 25, header: 'Properties', scroll: true, animate: true }
	        ]
	     },
	
		// Activate the layer map:
		layerOptions: {
			layerMap: true,
			layerMapOptions: { parentEl: YAHOO.util.Dom.get('right') }
		}
	});
}catch(ex){
	console.log(ex);
}
}); 
</script>

<style>
body {
	font-size: 10px;
}
div.WireIt-Container {
	width: 430px;
	height: 100px;
}
div.WireIt-InputExTerminal {
	float: left;
	width: 21px;
	height: 21px;
	position: relative;
}
div.WireIt-InputExTerminal div.WireIt-Terminal {
	top: -3px;
	left: -7px;
}
div.inputEx-Group div.inputEx-label {
	width:100px;
}
</style>


</head>

<body class="yui-skin-sam">

	<div id="top">
		<div class="logo">WireIt</a></div>
		<div id="toolbar"></div>
		<div class="topright">
			<span>Hello there !</span> | 
			<a href="../..">back to WireIt</a>
		</div>
	</div>


	<div id="left">
	</div>
	
	<div id="right">
	</div>

	<div id="center">
	</div>

</body>
</html>